<template>
  <div>
    <custom-table
      @handleSearch="handleSearch"
      @handleReset="handleReset"
      :searchOptoins="searchOptoins"
      :tableData="tableData"
      :column="column"
      :formData="formData"
      :qeuryParams="qeuryParams"
      :pagination-props="{
        total: 50,
        pageSize: 10,
        background: true,
      }"
      :pagination-events="{
        currentChange: currentPageChange,
        sizeChange: pageSizeChange,
      }"
    >
      <template #operation="scoped">
        <el-button type="primary" size="small">新增</el-button>
        <el-button type="danger" size="small">删除</el-button>
      </template>
    </custom-table>
  </div>
</template>

<script setup lang="ts">
import CustomTable from "@/components/CustomTable.vue";
import { reactive, ref } from "vue";
import selectData from "./0.js";

console.log("_APP_NAME", _APP_NAME);
let formData = reactive({});

let qeuryParams = reactive<any>({
  pageNum: 1,
  pageSize: 10,
});
const searchOptoins = ref([
  {
    type: "input",
    prop: "name",
    label: "姓名",
    attrs: {
      placeholder: "请输入姓名",
    },
  },
  {
    type: "select",
    prop: "area",
    label: "下拉",
    selectKey: "down",
    options: [],
    attrs: {
      style: {
        width: "200px",
      },
      placeholder: `请选择下拉`,
    },
    setOptions(item: any) {
      item.options = [
        {
          label: "1",
          value: "1",
        },
        {
          label: "2",
          value: "2",
        },
      ];
    },
  },
  {
    type: "selectTree",
    prop: "area2",

    label: "tree下拉2",
    attrs: {
      style: {
        width: "200px",
      },
      placeholder: "请选择area2",
      "check-strictly": true,
      "render-after-expand": false,
      clearable: true,
      data: [],
      props: {
        label: "label",
        value: "code",
        children: "children",
      },
    },

    setData(item: any) {
      item.attrs.data = selectData;
    },
  },
]);
const column = [
  {
    label: "姓名",
    prop: "name",
    align: "center",
  },

  {
    label: "住址",
    prop: "address",
    align: "center",
  },
  // {
  //   label: "图片",
  //   prop: "image",
  //   align: "center",
  //   // width: "200",

  // },
  // {
  //   label: "标签",
  //   prop: "tag",
  //   align: "center",
  //   slot: "tag",
  // },
  {
    label: "操作",
    slot: "operation",
    align: "center",
    width: "200",
  },
];
const tableData = ref([
  {
    name: "张三",
    address: "重庆市",
  },
  {
    name: "李四",
    address: "北京市",
  },
]);

for (let option of searchOptoins.value) {
  console.log("optionxx", option);

  option.setOptions && option.setOptions(option);
  option.setData && option.setData(option);
}

function handleSearch() {
  console.log("qeuryParams", { ...qeuryParams, ...formData });
}

function handleReset() {
  qeuryParams.pageNum = 1;
  qeuryParams.pageSize = 10;
  formData = {};
  handleSearch();
}

function currentPageChange(value: any) {
  qeuryParams.pageNum = value;
  handleSearch();
}
function pageSizeChange(value: any) {
  qeuryParams.pageSize = value;
  handleSearch();
}
</script>

<style scoped></style>
